<template>
	<view>
		<button size="mini" @click="pop.open()">+</button>
		<uni-popup ref="pop">
			<input type="text" v-model="type"/>
			<button @click="add">确定添加</button>
		</uni-popup>
		<!-- <my-list-item :item="item" v-for="(item, index) in collectionList" :key="index"></my-list-item> -->
		<view class="title">
			<view :class="activeIndex === index ? 'active': ''" @click="activeIndex = index"
				v-for="(item, index) in titleList" :key="index">
				{{item}}
			</view>
		</view>
		<view class="" v-if="activeIndex === 0">
			1
		</view>
		<view class="list" v-if="activeIndex === 1">
			<view @click="toCollList(item)" class="list-item-coll" v-for="(item, index) in collectionList" :key="index">
				{{item.type}}({{item.children.length}})
			</view>
		</view>
		<view class="" v-if="activeIndex === 2">
			3
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onShow
	} from '@dcloudio/uni-app'
	const activeIndex = ref(1)
	const type = ref('')
	const pop = ref()
	const add = () => {
		collectionList.value.push({
			type: type.value,
			children: []
		})
		pop.value.close()
	}
	const toCollList = (item) => {
		uni.navigateTo({
			url: '/pages/collect-list/collect-list?item=' + JSON.stringify(item)
		})
	}
	const collectionList = ref(uni.getStorageSync('collectionList') || [])
	const titleList = ['无分类', '分类', '随机土建']
	onShow(() => {
		collectionList.value = uni.getStorageSync('collectionList') || []
	})
</script>

<style lang="scss">
	.title {
		display: flex;
		justify-content: space-around;
		align-items: center;
		height: 60rpx;

		.active {
			color: red;
		}
	}
	
	.list {
		display: flex;
		flex-wrap: wrap;
		display: flex;
		justify-content: space-around;
		margin: 20rpx 0;
		.list-item-coll {
			width: 30%;
			height: 200rpx;
			border-radius: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
			border: 1px solid #ccc;
		}
	}
</style>